<template>
  <div class="right-route-box">
    <div class="table-top-box">
      <el-button type="primary"
                 icon="el-icon-plus"
                 size="small"
                 @click="addObj">添加</el-button>
      <el-button type="danger"
                 icon="el-icon-delete"
                 size="small"
                 @click="deleteObj">批量删除</el-button>
      <span class="margin-ten">学科：</span>
      <el-select v-model="value" clearable size="small" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span class="margin-ten">教师姓名：</span>
      <!--      el-input的v-model属性是绑定值-->
      <el-input v-model="input"
                size="small"
                style="width: 220px"
                placeholder="请输入教师姓名"></el-input>&ensp;
      <el-button type="primary"
                 size="small"
                 icon="el-icon-search"
                 @click="getList">搜索</el-button>
      <el-button type="info"
                 size="small"
                 icon="el-icon-brush"
                 @click="restClick">重置</el-button>
    </div>
    <div style="margin-left:10px">
      <el-table
          :data="tableData"
          stripe
          height="550"
          style="width: 100%;">
        <el-table-column
            label="序号"
            type="index"
            fixed>
        </el-table-column>
        <el-table-column v-for="(item) in columnArr"
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100"
            fixed="right">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
                       type="text"
                       size="small">查看
            </el-button>
            <el-button type="text"
                       size="small"
                       @click="$message.warning('开发中。。。')">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="添加教师基本信息"
                 :visible.sync="dialogFormVisible"
                 style="height: 600px">
        <el-form :model="form">
          <el-form-item label="编号:" label-width="200">
            <el-input v-model="form.code" autocomplete="off" class="col-width" placeholder="请输入编号"></el-input>
          </el-form-item>
          <el-form-item label="教师姓名:" label-width="100">
            <el-input v-model="form.name" autocomplete="off" class="col-width" placeholder="请输入教师姓名"></el-input>
          </el-form-item>
          <el-form-item label="学科:" label-width="100">
            <el-select v-model="form.subject" placeholder="请下拉选择学科">
              <el-option label="语文" value="语文"></el-option>
              <el-option label="数学" value="数学"></el-option>
              <el-option label="英语" value="英语"></el-option>
              <el-option label="物理" value="物理"></el-option>
              <el-option label="化学" value="化学"></el-option>
              <el-option label="生物" value="生物"></el-option>
              <el-option label="政治" value="政治"></el-option>
              <el-option label="历史" value="历史"></el-option>
              <el-option label="地理" value="地理"></el-option>
              <el-option label="美术" value="美术"></el-option>
              <el-option label="体育" value="体育"></el-option>
              <el-option label="微机" value="微机"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱:" label-width="100">
            <el-input v-model="form.email" autocomplete="off" class="col-width" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="电话:" label-width="100">
            <el-input v-model="form.phone" autocomplete="off" class="col-width" placeholder="请输入电话"></el-input>
          </el-form-item>
          <el-form-item label="地址:" label-width="100">
            <el-input v-model="form.address" autocomplete="off" class="col-width" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="教师介绍:" label-width="100">
            <el-input type="textarea" v-model="form.introduce" class="col-width" autocomplete="off"
                      placeholder="请输入教师介绍"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer"
             v-show="flag">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="determinate">确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  name: 'index',
  data() {
    return {
      flag: true,
      form: {
        code: '',
        name: '',
        subject: '',
        email: '',
        phone: '',
        address: '',
        introduce: '',
        icon: '',
      },
      dialogFormVisible: false,
      columnArr: [
        {prop: 'code', label: '编号', width: 140},
        {prop: 'name', label: '教师姓名', width: 80},
        {prop: 'subject', label: '学科', width: 60},
        {prop: 'email', label: '邮箱', width: 180},
        {prop: 'phone', label: '电话', width: 150},
        {prop: 'address', label: '住址', width: 180},
        {prop: 'introduce', label: '教师介绍', width: 180},
        {prop: 'icon', label: '头像', width: 80},
      ],
      tableDataTemp: [],
      tableData: [
        {
          code: '202305363540',
          name: '王老师',
          subject: '历史',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名历史老师',
          icon: '无',
          option: '历史',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '202305363540',
          name: '张老师',
          subject: '美术',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名美术老师',
          icon: '无',
          option: '美术',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '202305363540',
          name: '李老师',
          subject: '体育',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名体育老师',
          icon: '无',
          option: '体育',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '202305363540',
          name: '晨老师',
          subject: '数学',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名数学老师',
          icon: '无',
          option: '数学',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '202305363540',
          name: '柏老师',
          subject: '英语',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名英语老师',
          icon: '无',
          option: '英语',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '202305363540',
          name: '赵老师',
          subject: '数学',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名数学老师',
          icon: '无',
          option: '数学',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '202305363540',
          name: '王老师',
          subject: '语文',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名语文老师',
          icon: '无',
          option: '语文',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '202305363540',
          name: '王老师',
          subject: '物理',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名物理老师',
          icon: '无',
          option: '物理',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '202305363540',
          name: '王老师',
          subject: '语文',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名语文老师',
          icon: '无',
          option: '语文',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      input: '',
      value: '',
      options: [
        {
        value: '语文',
        label: '语文'
      },
        {
        value: '数学',
        label: '数学'
      },
        {
        value: '英语',
        label: '英语'
      },
        {
        value: '物理',
        label: '物理'
      },
        {
        value: '化学',
        label: '化学'
      },
        {
          value: '生物',
          label: '生物'
        },
        {
          value: '政治',
          label: '政治'
        },
        {
          value: '历史',
          label: '历史'
        },
        {
          value: '地理',
          label: '地理'
        },
        {
          value: '美术',
          label: '美术'
        },
        {
          value: '体育',
          label: '体育',
        },
        {
          value: '微机',
          label: '微机'
        },
        {
          value: '其他',
          label: '其他'
        },],
    }
  },
  methods: {
    determinate() {
      this.tableData.push(this.form)
      this.dialogFormVisible = false
      this.form = {}
      this.$message.success("添加成功")
    },
    handleClick(row) {
      //关闭脚部
      this.flag = false
      //？？？？
      this.form = row
      //显示弹窗
      this.dialogFormVisible = true
    },
    restClick() {
      this.input = ''
      this.value = ''
      this.tableData = this.tableDataTemp
    },
    addObj() {
      //清空表单
      this.form = {}
      //打开他的脚部显示
      this.flag = true
      //Dialog（对话框）中:visible.sync="dialogFormVisible"属性可以控制Dialog对话框的显示与消失
      //用户通过按钮来控制dialogFormVisible的值，从而来控制是否显示弹窗
      this.dialogFormVisible = true
    },
    deleteObj() {
      this.$message.warning("开发中。。。")
    },
    getList() {
      /*value:subject  input:姓名*/
      //如果性别和名称豆存在哪我就执行-->
      if (this.value && this.input ) {//存在：返回ture  如果是undefine || null  || '' 返回 false
        this.tableData = this.tableDataTemp.filter(tag => (tag.subject === this.value && tag.name === this.input))

        return
      }
      if (!this.value && this.input) {
        this.tableData = this.tableDataTemp.filter(tag => (tag.name === this.input))
        return
      }
      if (this.value && !this.input) {
        this.tableData = this.tableDataTemp.filter(tag => (tag.subject === this.value))
        return
      }
      if (!this.value && !this.input) {
        this.tableData = this.tableDataTemp
      }
    }
  },
  mounted() {
    //备份一份
    this.tableDataTemp = this.tableData
  }
}
</script>

<style scoped>
.table-top-box{
  height: 40px;
  margin-left: 10px;
  margin-top: 5px
}
.col-width {
  width: 300px;
}

.margin-ten {
  margin: 0 10px;
}
</style>
